<template>
	<section class="main">
		<input id="toggle-all" class="toggle-all" type="checkbox">
		<label for="toggle-all" @click="selectAll(select)">Mark all as complete</label>
		<ul class="todo-list">
			<li v-for="(item,index) in todoArr" :key="item.id" :class="{completed:item.completed}">
				<div class="view">
					<input class="toggle" @click="toggole(item)" type="checkbox">
					<label>{{item.title}}</label>
					<button class="destroy" @click="del(item.id)"></button>
				</div>
				<input class="edit">
			</li>
		</ul>
	</section>
</template>

<script>
	export default{
		methods:{
			toggole(item){
				this.$emit("complete",item)
			},
			del(id){
				this.$emit("del",id)
			},
			selectAll(select){
				this.select=!select
				this.$emit("selectAll",select)
			}
		},
		data(){
			return{
				select:true
			}
		},
		props:{
			todoArr:{
				type:Array,
				dafault(){
					return []
				}
			}
		}	
	}
</script>

<style>
</style>
